import { ComponentType } from 'react';
import Taro, { Component, Config } from '@tarojs/taro';
import { View, Button, Text } from '@tarojs/components';
import { observer, inject } from '@tarojs/mobx';

import './index.styl';
import { observable } from 'mobx';

type PageStateProps = {
  counterStore: {
    counter: number;
    increment: Function;
    decrement: Function;
    incrementAsync: Function;
  };
};

interface Index {
  props: PageStateProps;
}

@inject('counterStore')
@observer
class Index extends Component {
  /**
   * 指定config的类型声明为: Taro.Config
   *
   * 由于 typescript 对于 object 类型推导只能推出 Key 的基本类型
   * 对于像 navigationBarTextStyle: 'black' 这样的推导出的类型是 string
   * 提示和声明 navigationBarTextStyle: 'black' | 'white' 类型冲突, 需要显示声明类型
   */
  config: Config = {
    navigationBarTitleText: '首页'
  };
  pageCounterOb = observable({
    pageCounter: 10
  });

  componentWillMount() {}

  componentWillReact() {
    console.log('componentWillReact');
  }

  componentDidMount() {}

  componentWillUnmount() {}

  componentDidShow() {}

  componentDidHide() {}

  increment = () => {
    const { counterStore } = this.props;
    counterStore.increment();
    this.pageCounterOb.pageCounter++;
    this.setState({});
  };

  decrement = () => {
    const { counterStore } = this.props;
    counterStore.decrement();
    this.pageCounterOb.pageCounter--;
    this.setState({});
  };

  incrementAsync = () => {
    const { counterStore } = this.props;
    counterStore.incrementAsync();
  };

  navSecondPage = () => {
    Taro.navigateTo({ url: '/pages/second/second' });
  };

  render() {
    const {
      counterStore: { counter }
    } = this.props;

    return (
      <View className="index">
        <Button onClick={this.increment} className={'buttonClass'}>
          +
        </Button>
        <Button onClick={this.decrement}>-</Button>
        <Button onClick={this.incrementAsync}>Add Async</Button>
        <div>
          <Text>{counter}</Text>
        </div>
        <View>
          <Text className="buttonClass">测试文字</Text>
        </View>
        <View>
          <Text>{this.pageCounterOb.pageCounter}</Text>
        </View>
        <Button onClick={this.navSecondPage}>跳转页面</Button>
      </View>
    );
  }
}

export default Index as ComponentType;
